<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js">
			// 使用Vue首先要导包
		</script>
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="" id="app">
			<!-- 给table写上id，关联到vue -->
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
				<th>Header4</th>
				
			</tr>
			<tr v-for="stu in stus"><!-- foreach循环语句 -->
				<td>{{stu.id}}</td>
				<td>{{stu.name}}</td><!-- 绑定了下面的vue -->
				<td>{{stu.age}}</td>
				<td>{{stu.sex}}</td>
				<!-- <td>{{age}}</td> -->
				<!-- 这是原来的age，按下按钮++ -->
			</tr>
		</table>
		<button type="button" onclick="fun()">按钮</button>
	</body>
</html>

<script type="text/javascript"> 
	var v=new Vue({
		el:'#app',    /*把table的id选进来，对象的名字叫app*/
		data:{
			// age:21
			stus:[
				{
					id:1,
					name:'张三',
					age:9,
					sex:'男'
				}
				
				]
		},
		mounted() {//ajax的fun方法转移过来
			axios.get('http://localhost:8458/JavaWeb1_DongRuan/StuControl')//异步请求
			  .then(function (response) {
			   v.stus= response.data;//后端返回的json串儿，赋值到vue,改变前端
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	});
	// function fun()//一点击按钮，就异步请求服务器
	// {
	// 	// var x=document.getElementById("ww").innerHTML;
	// 	// x=parseInt(x)
	// 	// x=x+1;
	// 	// document.getElementById("ww").innerHTML=x;
	// 	// v.age ++;
		

	// }
	
</script>